import React from "react";
import {makeStyles, useTheme, withStyles} from "@material-ui/core/styles";
import Dialog from "@material-ui/core/Dialog";
import MuiDialogContent from "@material-ui/core/DialogContent";
import {Fab, Grid, Paper, Tooltip} from "@material-ui/core";
import Typography from "@material-ui/core/Typography";
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
import {faArrowRight} from "@fortawesome/free-solid-svg-icons";
import MobileStepper from "@material-ui/core/MobileStepper";
import Button from "@material-ui/core/Button";
import KeyboardArrowLeft from "@material-ui/icons/KeyboardArrowLeft";
import KeyboardArrowRight from "@material-ui/icons/KeyboardArrowRight";
import {autoPlay} from "react-swipeable-views-utils";
import SwipeableViews from "react-swipeable-views";

const AutoPlaySwipeableViews = autoPlay(SwipeableViews);

const DialogContent = withStyles((theme) => ({
  root: {
    padding: theme.spacing(2)
  }
}))(MuiDialogContent);

const useStyles = makeStyles((theme) => ({
  root: {
    maxWidth: 800,
    flexGrow: 1
  },
  header: {
    display: "flex",
    alignItems: "center",
    height: 210,
    backgroundColor: theme.palette.background.default
  },
  img: {
    height: 470,
    display: "block",
    maxWidth: 800,
    overflow: "hidden",
    width: "100%"
  },
  gutterBottom: {
    marginBottom: theme.spacing(2)
  },
}));

export default function TutorialSlides({state, handleOpen, tutorialSteps}) {
  const styles = useStyles();
  const theme = useTheme();
  const [activeStep, setActiveStep] = React.useState(0);
  const maxSteps = tutorialSteps.length;

  const handleNext = () => {
    setActiveStep((prevActiveStep) => prevActiveStep + 1);
  };

  const handleBack = () => {
    setActiveStep((prevActiveStep) => prevActiveStep - 1);
  };

  const handleStepChange = (step) => {
    setActiveStep(step);
  };


  return (
    <>
      <Dialog onClose={handleOpen} open={state}>
        <DialogContent style={{padding: "0px"}}>
          <div className={styles.root}>
            <AutoPlaySwipeableViews
              axis={theme.direction === "rtl" ? "x-reverse" : "x"}
              index={activeStep}
              onChangeIndex={handleStepChange}
              enableMouseEvents
              interval={7000}
            >
              {tutorialSteps.map((step, index) => (
                <div key={step.label}>
                  {Math.abs(activeStep - index) <= 2 ? (
                    <img
                      className={styles.img}
                      src={step.imgPath}
                      alt={step.label}
                    />
                  ) : null}
                </div>
              ))}
            </AutoPlaySwipeableViews>
            <Paper elevation={0} className={styles.header}>
              <Grid container direction="column" alignItems="center">
                <Typography variant="h4" gutterBottom>
                  {tutorialSteps[activeStep].label}
                </Typography>
                <Grid
                  container
                  direction="column"
                  alignItems="center"
                  style={{padding: "0px 24px 0px 24px"}}
                >
                  <Grid item className={styles.gutterBottom}>
                    <Typography align="center" gutterBottom> {tutorialSteps[activeStep].description} </Typography>
                  </Grid>
                  <Grid item>
                    <Tooltip arrow placement="bottom" title={<Typography>Start</Typography>}>
                      <Fab size="medium" onClick={handleOpen} color="primary">
                        <FontAwesomeIcon icon={faArrowRight} size={'2x'}/>
                      </Fab>
                    </Tooltip>
                  </Grid>
                </Grid>
              </Grid>
            </Paper>
            <MobileStepper
              steps={maxSteps}
              position="static"
              variant="dots"
              activeStep={activeStep}
              nextButton={
                <Button size="small" onClick={handleNext} disabled={activeStep === maxSteps - 1}>
                  Next
                  {theme.direction === "rtl" ? <KeyboardArrowLeft/> : <KeyboardArrowRight/>}
                </Button>
              }
              backButton={
                <Button size="small" onClick={handleBack} disabled={activeStep === 0}>
                  {theme.direction === "rtl" ? <KeyboardArrowRight/> : <KeyboardArrowLeft/>}
                  Back
                </Button>
              }
            />
          </div>
        </DialogContent>
      </Dialog>
    </>
  );
}
